'use client'
import { useCallback, useEffect, useState } from 'react'
import { useContext } from 'use-context-selector'
import { RiCloseLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import { ReactMultiEmail } from 'react-multi-email'
import { RiErrorWarningFill } from '@remixicon/react'
import Input from '@/app/components/base/input'
import RoleSelector from './role-selector'
import s from './index.module.css'
import cn from '@/utils/classnames'
import Modal from '@/app/components/base/modal'
import Button from '@/app/components/base/button'
import { inviteMember } from '@/service/common'
import { emailRegex } from '@/config'
import { ToastContext } from '@/app/components/base/toast'
import type { InvitationResult } from '@/models/common'
import I18n from '@/context/i18n'
import 'react-multi-email/dist/style.css'
import { noop } from 'lodash-es'

import { useProviderContextSelector } from '@/context/provider-context'
type IEditInviteModalProps = {
  ids: string,
  names: string,
  deptNames: string,
  onCancel: () => void
  onSend: (invitationResults: InvitationResult[]) => void
}

const InviteModal = ({
  ids,
  names,
  deptNames,
  onCancel,
  onSend,
}: IEditInviteModalProps) => {
  const { t } = useTranslation()
  const refreshLicenseLimit = useProviderContextSelector(s => s.refreshLicenseLimit)
  const { notify } = useContext(ToastContext)
  const [name, setName] = useState('')
  const [accountNum, setAccountName] = useState('')
  const [id, setId] = useState('')
  const [deptName, setDeptName] = useState('')
  useEffect(() => {
    if (ids && names) {
      setId(ids)
      setName(names)
      setDeptName(deptNames)
    }
  }, [ids, names, deptNames])

  const { locale } = useContext(I18n)
  const [role, setRole] = useState<string>('normal')

  const handleSend = useCallback(async () => {
    try {
      const { result, invitation_results } = await inviteMember({
        url: '/account/update',
        body: { id, name, dept_name: deptName },
      })
      console.log(result, invitation_results)
      refreshLicenseLimit()
      onCancel()
      onSend(invitation_results)
    } catch (e) {
      notify(e.message)
    }
  }, [name, accountNum, role, deptName, locale, onCancel, onSend, notify, t])

  return (
    <div className={cn(s.wrap)}>
      <Modal overflowVisible isShow onClose={noop} className={cn(s.modal)}>
        <div className='flex justify-between mb-2'>
          <div className='text-xl font-semibold text-text-primary'>编辑</div>
          <RiCloseLine className='w-4 h-4 cursor-pointer text-text-tertiary' onClick={onCancel} />
        </div>
        <div>

          <div className='flex flex-col items-stretch mb-8'>
            {/* <div className='flex'>
              <label htmlFor="accountNum" className="my-2 mr-3 text-[16px] font-base">
                账号
              </label>
              <div className="flex-1 mt-1">
                <Input
                  value={accountNum}
                  size={'large'}
                  onChange={e => setAccountName(e.target.value)}
                  id="accountNum"
                  placeholder={'输入账号' || ''}
                />
              </div>
            </div> */}
            <div className='flex'>
              <label htmlFor="name" className="my-2 mr-3 text-[16px] font-base">
                用户
              </label>
              <div className="flex-1 mt-1">
                <Input
                  value={name}
                  size={'large'}
                  onChange={e => setName(e.target.value)}
                  id="name"
                  placeholder={'输入用户' || ''}
                />
              </div>
            </div>
            <div className='flex'>
              <label htmlFor="deptName" className="my-2 mr-3 text-[16px] font-base">
                科室
              </label>
              <div className="flex-1 mt-1">
                <Input
                  value={deptName}
                  size={'large'}
                  onChange={e => setDeptName(e.target.value)}
                  id="deptName"
                  placeholder={'输入科室' || ''}
                />
              </div>
            </div>
          </div>

          <Button
            className='w-full'
            onClick={handleSend}
            variant='primary'
          >
            保存
          </Button>
        </div>
      </Modal>
    </div>
  )
}

export default InviteModal
